<template>
    <view class="dietDetails" :style=" { paddingTop: paddingHeight + 'px' } ">
        <nav-bar title="饮食" backgroundColor="#FAFAFA"></nav-bar>
        <view class="m-container">
            <view class="date_h">
                <view class="pre_p" @click=" reduceTap ">
                    <text class="iconfont icon-ln_sanjiaozuo"></text>
                </view>
                <view class="date_m" @click="showCalendar = true">
                    <text>{{ currentSearchTime }}</text>
                    <text class="iconfont icon-ln_sanjiaoxia"></text>
                </view>
                <view class="next_p" @click=" plusTap ">
                    <text class="iconfont icon-ln_sanjiaoyou"></text>
                </view>
            </view>
        </view>
        <view class="content">
            <image class="img" @click="navigateTo(1)"
                src="http://oss.antaimedical.com/images/pro/2024/10/6708c593e4b0be9d444233a1b5SLrflozxdBb7282b2efc1f6a69aa33b4393e3bd06a.png">
            </image>
            <image class="img" @click="navigateTo(2)"
                src="http://oss.antaimedical.com/images/pro/2024/10/6708c5cee4b0d615350f308cJhowMaUYqGhr5fdc13be6158cb7857b3c8084245d76b.png">
            </image>
        </view>
        <view class="btn" @click="navigateBack">
            上一步
        </view>
        <my-calendar :monthNum=" 24 " :defaultDate=" defaultDate " :maxDate=" maxDate " @confirm=" selectDate "
            :minDate=" minDate " :show=" showCalendar " color="#545DDE" closeOnClickOverlay
            @close="showCalendar = false"></my-calendar>
    </view>
</template>
<script>
import myCalendar from '@/components/myCalendar/myCalendar.vue';
const dayjs = require('@/utils/dayjs.min.js');
export default {
    components: {
        myCalendar,
    },
    data () {
        return {
            paddingHeight: uni.getStorageSync('navbarHeight'),
            userId: uni.getStorageSync("userId"),
            defaultDate: [],
            maxDate: undefined,
            minDate: undefined,
            currentSearchTime: undefined, // 当前查询的时间
            showCalendar: false, // 日历控件显示
            type:'',
        }
    },

    onLoad (OPTIONS) {
        this.currentSearchTime = OPTIONS.day
        // this.time = OPTIONS.time
        this.type = OPTIONS.type
        // 设置最大搜索时间及最小搜索时间
        let weekDay = dayjs().day() // 获取今天周几
        this.maxDate = dayjs().format('YYYY-MM-DD');
        this.minDate = dayjs(dayjs(this.maxDate).subtract(weekDay - 1, 'day')).format('YYYY-MM-DD')
        // this.currentSearchTime = dayjs().format('YYYY/MM/DD')
        this.defaultDate[0] = this.maxDate
    },
    onShow () {
    },
    methods: {
        navigateTo (type) {
            // reType : 1推荐  2自定义
            uni.navigateTo({
                url: `/pagesA/health/diet/add?type=${this.type}&day=${this.currentSearchTime}&reType=${type}`
            })
        },
        navigateBack(){
            uni.navigateBack()
        },
        // 选择日期
        selectDate (e) {
            console.log(e);
            this.defaultDate[0] = e[0]
            this.currentSearchTime = e[0].replaceAll('-', '/')
            this.fetchData()
            this.showCalendar = false
        },
        // 上一个选项
        reduceTap () {
            let pre = dayjs(dayjs(this.currentSearchTime).subtract(1, 'day')).format('YYYY/MM/DD')
            let min = dayjs(this.minDate).format('YYYY/MM/DD')
            if (!dayjs(pre).isBefore(min)) { // 比对前一天是否是最小天数的前一天
                this.currentSearchTime = pre
                this.defaultDate[0] = pre.replaceAll('/', '-')
                this.fetchData()
            } else {
                uni.showToast({
                    title: '已经是最后一页',
                    icon: 'none'
                })
            }
        },
        // 下一个选项
        plusTap () {
            let next = dayjs(dayjs(this.currentSearchTime).add(1, 'day')).format('YYYY/MM/DD')
            let max = dayjs(this.maxDate).format('YYYY/MM/DD')
            if (!dayjs(next).isAfter(max)) { // 比对后一天是否是最大天数的后一天
                this.currentSearchTime = next
                this.defaultDate[0] = next.replaceAll('/', '-')
                this.fetchData()
            } else {
                uni.showToast({
                    title: '已经是最后一页',
                    icon: 'none'
                })
            }
        },
    }
}
</script>
<style lang="scss">
page {
    background-color: #FAFAFA;
    min-height: 100%;
    padding-bottom: 64rpx;
}
</style>
<style lang="scss" scoped>
.m-container {
    margin-top: 48rpx;

    .tips {
        font-size: 32rpx;
        color: #666666;
        text-align: left;
    }

    .date_h {
        padding: 48rpx 0 32rpx;

        .next_p,
        .pre_p {
            background-color: #545DDE;

            .iconfont {
                color: #fff;
                font-size: 16rpx;
            }
        }

        .date_m {
            background-color: #545DDE;
            color: #fff;

            .iconfont {
                color: #fff;
                font-size: 16rpx;
            }
        }
    }

}

.content {
    width: 100%;
    padding: 0 32rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .img {
        width: 100%;
        height: 600rpx;
        margin-bottom: 32rpx;
    }
}

.btn {
    width: 686rpx;
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #545DDE;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    margin: 0 auto;
}
</style>